<template>
	<view class="audio">
		<!-- <image class="bg" src="../../static/image/audio/bg.png" mode="aspectFill"></image>
		<view class="audio-box">
			<image class="center-img" src="../../static/image/audio/1.png" mode="widthFix"></image>
			
			<view class="a-box-1">
				<view class="l-btn" @click="playTypeClick">
					<image src="../../static/image/audio/2.png" mode="widthFix"></image>
					<text>{{playType.text}}</text>
				</view>
				<view class="r-btn" @click="rateClick">
					<image src="../../static/image/audio/3.png" mode="widthFix"></image>
					<text>倍速播放</text>
				</view>
			</view>
			<view class="b-audio">
				<view class="b-1">
					<image class="b-l" @click="seekTime(1)" src="../../static/image/audio/7.png" mode="widthFix"></image>
					<view class="j-box">
						<view class="d-bg" id="JDCONTENT">
							<view class="b-btn" id="JDBOX" 
								:style="{left:JDBOXLEFT+'px'}"
							>
								{{timeFormat(Math.floor(video_currentTime))}}/{{timeFormat(all_Time)}}
							</view>
						</view>
					</view>
					<image class="b-r" @click="seekTime(2)" src="../../static/image/audio/8.png" mode="widthFix"></image>
				</view>
				<view class="b-2">
					<image class="b-2-1 l-img" src="../../static/image/audio/5.png" mode="widthFix"></image>
					<image class="b-2-2" @click="play" v-if="!isPlay" src="../../static/image/audio/4.png" mode="widthFix"></image>
					<image class="b-2-2" @click="pause" v-else src="../../static/image/audio/4-1.png" mode="widthFix"></image>
					<image class="b-2-1 r-img" src="../../static/image/audio/6.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		
		
		<popupBox ref="videoRate" type="bottom" :isSlot="true">
			<view class="popup-box">
				<view class="item" v-for="(item,i) in rateList" :class="String(rate)==item ? 'select' : ''" :key="i" @click="setVideoRate(item)">
					{{item}}
				</view>
				<view class="cancel" @click="closeRate()">
					<text>取消</text>
				</view>
			</view>
		</popupBox>
		<popupBox ref="play_type" type="bottom" :isSlot="true">
			<view class="popup-box">
				<view class="item" v-for="(item,i) in playTypeList" :class="playType.value==item.value ? 'select' : ''" :key="i" @click="setPlayType(item)">
					{{item.text}}
				</view>
				<view class="cancel" @click="closePlayType()">
					<text>取消</text>
				</view>
			</view>
		</popupBox> -->
	</view>
</template>

<script>
	import popupBox from '@/components/popup/popup'
	export default {
		name:"my_audio",
		components:{
			popupBox
		},
		props:{
			src:{
				type:String,
				default:''
			},
		},
		data() {
			return {
				isPlay:false,
				isPause:true,
				video_currentTime:0,
				all_Time:0,
				videoContext:null,
				rateList:['0.5','0.8','1.0','1.25','1.5'],
				rate:'1.0',
				playTypeList:[
					{
						text:'单集播放',
						value:'1'
					},
					{
						text:'单集循环',
						value:'2'
					},
					{
						text:'连续播放',
						value:'3'
					},
				],
				playType:{
					text:'单集播放',
					value:'1'
				},
				
				JDCONTENTWIDTH:0,
				JDBOXWIDTH:0,
				JDBOXLEFT:0,
				
				touchStart:false,
				clientX:0,
				initWidth:0
			};
		},
		computed:{
			
		},
		created() {
			this.init()
		},
		mounted() {
			
		},
		deactivated() {
			this.videoContext.pause()
		},
		destroyed() {
			this.videoContext.pause()
		},
		watch:{
		},
		methods:{
			init(){
				
					this.videoContext = uni.createInnerAudioContext()
					this.videoContext.src = this.src
					// this.setVideoRate('1.0')
					this.videoContext.onPlay(this.videoPlay);//开始播放
					this.videoContext.onPause(this.videoPause);//暂停播放
					this.videoContext.onEnded(this.videoEnded);//播放结束
					this.videoContext.onTimeUpdate(this.videoTimeupdate);//播放进度变化
					this.videoContext.onCanplay(this.onCanplay)
					
					
					const query = uni.createSelectorQuery().in(this);
					query
					  .select("#JDCONTENT")
					  .boundingClientRect((data) => {
					    console.log("得到布局位置信息" , data);
					    // console.log("节点离页面顶部的距离为" + data.top);
						this.JDCONTENTWIDTH = data.width
					  }).select("#JDBOX")
					    .boundingClientRect((data) => {
					      console.log("得到布局位置信息" , data);
						  this.JDBOXWIDTH = data.width
					      // console.log("节点离页面顶部的距离为" + data.top);
					    })
					  .exec();
			},
			
			// 时长格式化
			timeFormat(time){
				let min,sec
				
				if(Math.floor(time/60)<10){
					min = '0'+Math.floor(time/60)
				}else{
					min = Math.floor(time/60)
				}
				if(this.$dayjs.duration(time,'seconds').seconds()<10){
					sec = '0'+this.$dayjs.duration(time,'seconds').seconds()
				}else{
					sec = this.$dayjs.duration(time,'seconds').seconds()
				}
				return min+':'+sec
			},
			
			// 暂停
			pause(){
				// this.videoContext.seek(0)
				this.videoContext.pause()
			},
			// 播放
			play(){
				this.videoContext.play()
				
			},
			
			// 倍速
			rateClick(){
				this.$refs.videoRate.open()
			},
			closeRate(){
				this.$refs.videoRate.close()
			},
			setVideoRate(rate){
				this.rate = rate
				this.videoContext.playbackRate = Number(rate)
				this.closeRate()
			},
			
			// 单集播放,循环,多集
			playTypeClick(){
				this.$refs.play_type.open()
			},
			closePlayType(){
				this.$refs.play_type.close()
			},
			setPlayType(data){
				this.playType = data
				this.closePlayType()
			},
			
			// 开始滑动
			// jd_start(event){
			// 	console.log(event,'start')
			// 	this.touchStart = true
			// 	this.clientX = event.changedTouches[0].clientX
			// 	this.initWidth = JSON.parse(JSON.stringify(this.JDBOXLEFT))
			// },
			// jd_move(event){
			// 	console.log(event,'move')
			// 	if(this.touchStart){
			// 		let add_w = event.changedTouches[0].clientX - this.clientX
			// 		// let s = Math.floor((this.initWidth+add_w)/i)
			// 		let left = this.initWidth+add_w
			// 		if(left < this.JDCONTENTWIDTH && left>=0){
			// 			this.JDBOXLEFT = this.initWidth+add_w
			// 		}
			// 		// this.videoContext.seek(s)
			// 	}
			// },
			// jd_end(event){
			// 	console.log(event,'end')
			// 	this.touchStart = false
			// 	let i = this.JDCONTENTWIDTH/this.all_Time
			// 	this.videoContext.seek(Math.floor(this.JDBOXLEFT/i))
			// },
			
			// 音频可以进入播放状态
			onCanplay(){
				this.all_Time = this.videoContext.duration
			},
			
			// 播放结束
			videoEnded(){
				this.isPlay = false
				
				if(this.playType.value=='1'){
					this.videoContext.seek(0)
					this.videoContext.pause()
				}else if(this.playType.value=='2'){
					this.videoContext.seek(0)
					this.videoContext.play()
				}else{
					this.$emit('nextVideo')
				}
			},
			
			// 开始播放
			videoPlay(){
				this.isPlay = true
				
			},
			// 播放暂停
			videoPause(){
				this.isPlay = false
				
			},
			// 
			videoClick(){
			},
			// 播放进度监听
			videoTimeupdate(e){
				this.video_currentTime = this.videoContext.currentTime
				let allWidth = this.JDCONTENTWIDTH - this.JDBOXWIDTH
				this.JDBOXLEFT = allWidth*(this.videoContext.currentTime/this.all_Time)
			},
			// 快进快退15s
			seekTime(type){
				if(this.video_currentTime<15){
					if(type==1){
						this.videoContext.seek(0)
					}else{
						if((this.all_Time-this.video_currentTime)>15){
							this.videoContext.seek(this.video_currentTime+15)
						}else{
							this.videoContext.seek(this.all_Time-2)
						}
					}
				}else{
					if(type==1){
						this.videoContext.seek(this.video_currentTime-15)
					}else{
						if((this.all_Time-this.video_currentTime)>15){
							this.videoContext.seek(this.video_currentTime+15)
						}else{
							this.videoContext.seek(this.all_Time)
						}
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>

		.audio{
			width: 100%;
			height: 100%;
			// video{
			// 	width: 100%;
			// 	height: 100%;
			// }
			
			position: relative;
			.bg{
				width: 100%;
				height: 100%;
				position: absolute;
				top: 0;
				left: 0;
				z-index: 1;
			}
			&>audio{
				position: absolute;
				z-index: -1;
				opacity: 0;
			}
			.audio-box{
				position: relative;
				width: 100%;
				height: 100%;
				z-index: 9;
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				.center-img{
					position: absolute;
					left: 50%;
					top: 60rpx;
					transform: translateX(-50%);
					width: 140rpx;
					height: 140rpx;
				}
				.a-box-1{
					display: flex;
					align-items: center;
					justify-content: space-between;
					width: 100%;
					padding: 180rpx 142rpx 0;
					box-sizing: border-box;
					&>view{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						image{
							width: 60rpx;
							height: 60rpx;
						}
						text{
							font-weight: bold;
							font-size: 30rpx;
							color: #FFFFFF;
							line-height: 42rpx;
							margin-top: 8rpx;
						}
					}
				}
				.b-audio{
					width: 100%;
					height: 152rpx;
					padding: 20rpx 22rpx 28rpx;
					margin-top: 16rpx;
					box-sizing: border-box;
					background: linear-gradient( 180deg, rgba(0,0,0,0.14) 0%, rgba(0,0,0,0.7) 100%);
					.b-1{
						display: flex;
						align-items: center;
						&>image{
							width: 45rpx;
							height: 40rpx;
						}
						.j-box{
							width: calc(100% - 90rpx);
							padding: 0 20rpx;
							box-sizing: border-box;
							.d-bg{
								width: 100%;
								height: 20rpx;
								background: rgba(255, 255, 255, 0.3);
								border-radius: 10rpx;
								position: relative;
								.b-btn{
									position: absolute;
									top: 50%;
									left: 0;
									transform: translateY(-50%);
									transition: all .5s;
									padding: 0 10rpx;
									height: 40rpx;
									background: #E72A2A;
									border-radius: 20rpx;
									font-weight: bold;
									font-size: 22rpx;
									color: #FFFFFF;
									line-height: 40rpx;
								}
							}
						}
					}
					.b-2{
						display: flex;
						align-items: center;
						justify-content: center;
						margin-top: 16rpx;
						.b-2-1{
							width: 24rpx;
							height: 30rpx;
						}
						.b-2-2{
							width: 48rpx;
							height: 48rpx;
							margin: 0 60rpx;
						}
					}
				}
			}
		}

	.popup-box{
		width: 100%;
		.item{
			height: 96rpx;
			text-align: center;
			font-weight: 400;
			font-size: 32rpx;
			color: #999999;
			line-height: 96rpx;
			&.select{
				background: #FFF2F2;
				color: #E72A2A;
				font-weight: bold;
			}
		}
		.cancel{
			padding: 30rpx 0 20rpx;
			border-top: 10rpx solid rgba(153, 153, 153, 0.1);
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
			color: #999999;
			line-height: 44rpx;
		}
	}
</style>